<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.0.6/swiper-bundle.css">

</head>

<body class="disflex fledir-col jstctt-spcbt">

    <!-- 主体部分 -->
    <main class="main flex1">
        <!-- 轮播图 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../img/index-swiper-bg1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../img/index-swiper-bg2.jpg" alt="">

                </div>
                <div class="swiper-slide">
                    <img src="../img/index-swiper-bg3.jpg" alt="">

                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

        </div>
        <!-- 内容部分 -->
        <div class="content disflex">
            <!-- 排名 -->
            <div class="rank rel">
                <img src="../img/index-card-rank.png" alt="" class="abs">
                <p class="nowRank abs fon20">今日排名</p>
                <p class="rankNum abs fon50" id="rankingNum"></p>
            </div>
            <!-- 打卡 -->
            <div class="punch rel">
                <img src="../img/index-card-sum.png" alt="" class="abs">
                <p class="sum abs fon20" id="punchCount"></p>
                <p class="nowPunch abs fon16 tcenter" id="punchBtn">今日打卡</p>
            </div>
        </div>
        <div class="content disflex">
            <!-- 运动数据 -->
            <div class="sport rel">
                <p class="sportData abs colorf fon16">运动数据</p>
            </div>
            <!-- 累积徽章 -->
            <div class="badge rel">
                <img src="../img/index-card-badge.png" alt="" class="abs">
                <p class="sumbadge abs fon16">累积运动徽章</p>
                <p class="badgeNum abs fon50" id="badgesNum"></p>
            </div>
        </div>
        <!-- 课程训练 -->
        <div class="coursebg">
            <p class="course-train colorf fon16">课程训练</p>
        </div>
        <!-- 户外跑步 -->
        <div class="joggingbg">
            <p class="jogging colorf fon16">户外跑步</p>
        </div>
    </main>

    <!-- 底部导航栏 -->
    <footer class="footer disflex"></footer>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.0.6/swiper-bundle.min.js"></script>
</body>

</html>